import { useUpdateEffect } from 'ahooks'
import { List, Image, InfiniteScroll } from 'antd-mobile'
import Link from 'next/link'
import router from 'next/router'
import React, { useState } from 'react'
import { judgeLoad } from '../../../libs/utils'
import { Relevance } from '../../../models/enums'
import { UList } from '../../../services/user.service'
import Empty from '../../Empty'

import styles from './style.module.scss'

interface Props {
  users: UList[],
  onChange: (focus: boolean) => void
  hasMore: boolean
  getUsers: (skip: number, focus: boolean) => void
}

const Followed = ({ users, onChange, hasMore, getUsers }: Props) => {

  const [active, setActive] = useState(true)

  useUpdateEffect(() => {
    onChange(active)
  }, [active])
  return (
    <List header={
      <div className={styles.header}>
        <span>关注</span>
        <ul>
          <li
            className={active ? styles.bule : ' '}
            onClick={() => setActive(true)}>关注</li>
          <li
            className={active ? ' ' : styles.bule}
            onClick={() => setActive(false)}>关注者</li>
        </ul>
      </div>
    }>
      {users?.map(user => (
        <List.Item
          arrow={false}
          key={user._id}
          prefix={
            <Image
              alt='avatar'
              src={user.avatar}
              style={{ borderRadius: 20 }}
              fit='cover'
              width={40}
              height={40}
            />
          }
          description={user.signature}
          onClick={() => router.push(`/user/${user._id}/dynamic`)}
        >
          {user.nickname}
        </List.Item>
      ))}
      {users.length === 0 && <Empty />}
      {
        !judgeLoad(users, hasMore) &&
        <InfiniteScroll
          loadMore={async () => getUsers(users.length, active)}
          hasMore={hasMore}
        />
      }
    </List>
  )
}

export default Followed
